<template>
  <el-container>
    <el-header>
      <headertop/>
    </el-header>
    <el-main>
      <div class="body">
        <!-- 轮播 -->
          <el-carousel :height="556 + 'px'" :interval="3000" arrow="always">
            <el-carousel-item v-for="(item,index) in list" :key="index">
              <!-- <h2>{{item}}</h2> -->
              <img :src="item" alt="index">
            </el-carousel-item>
          </el-carousel>
        <!-- 新闻 -->
        <div class="news">
          <div class="new1">
            <div class="board">
              <div class="club"></div>
              <el-link class="publicity" :underline="false">公示公告</el-link>
              <el-link class="hotnews" :underline="false">部门热闻</el-link>
              <el-link class="policy" :underline="false">政策解读</el-link>
            </div>
            <div class="detiles">
              <ul >
                <li class="lis">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
                <li class="lis">6666666666</li>
              </ul>
            </div>
          </div>
          <div class="new2">
            <div class="board">
              <div class="club"></div>
              <el-link class="publicity" :underline="false">今日口岸</el-link>
            </div>
            <div class="between">
              <ul>
                <li class="between_lis">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
              </ul>
            </div>
          </div>
        </div>
>
        <!-- 专题 -->
        <div class="special">
          <div class="theme">
            <div class="board">
              <div class="club"></div>
              <el-link class="publicity" :underline="false">专题专栏</el-link>
            </div>
            <div class="imgs">
              <div v-for="(item,index) in myList" :key='index'>
                <div class="img1">
                  <img :src="item.myUrl" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="appeal">
            <div class="board">
              <div class="club"></div>
              <el-link class="publicity" :underline="false">今日口岸</el-link>
            </div>
            <div class="office">
              <el-button type="primary" class="office_area">主要按钮</el-button>
            </div>
            <div class="i_appeal">
              <el-button type="primary" class="i_appeal_btn">主要按钮</el-button>
            </div>
          </div>
        </div>

      </div>
    </el-main>
    <el-footer class="fot">
      <foot></foot>
    </el-footer>
  </el-container>
</template>
<script>
// // 导入组件
import navcon from "@/components/navcon";
import leftnav from "@/components/leftnav";
import headertop from "@/components/header";
import foot from '@/components/footer'

export default {
  name: "index",
  data() {
    return {
      showclass: "asideshow",
      showtype: false,
      list: [
        require("@/assets/img/banner1.jpg"),
        require("@/assets/img/banner2.jpg"),
        require("@/assets/img/banner3.jpg")
      ],
      myList:[
        {myUrl:require("@/assets/img/column1.jpg")},
        {myUrl:require("@/assets/img/column2.jpg")},
        {myUrl:require("@/assets/img/column3.jpg")},
        {myUrl:require("@/assets/img/column4.jpg")}
      ]
    };
  },

  created() {},
  // 注册组件
  components: {
    navcon,
    leftnav,
    headertop,
    foot,
  },
  methods: {},
  // created() {
  //   // 监听
  //   this.$root.Bus.$on("toggle", value => {
  //     if (value) {
  //       this.showclass = "asideshow";
  //     } else {
  //       setTimeout(() => {
  //         this.showclass = "aside";
  //       }, 300);
  //     }
  //   });
  // },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {
    // 弹出登录成功
    // this.$message({
    //   message: "登录成功",
    //   type: "success"
    // });
  }
};
</script>
<style lang='less'   scoped>
.body {
  width: 1400px;
  height: 100%;
  /* background-color: skyblue; */
  margin: 0 auto;
}
.el-header {
  padding: 0 !important;
  height: 150px !important;
}

// .el-aside {
//   background-color: #d3dce6;
//   color: #333;
//   text-align: center;
//   line-height: 200px;
// }

.el-main {
  background-color: #e9eef3; 
  // padding: 0;
  color: #333;
}

// .main {
//   margin-top: 5px;
//   width: 100%;
//   position: relative;
// }
.news {
  width: 100%;
  // height: 400px;
  margin-top: 10px;
  overflow: hidden;
  display: flex;
}

.new1 {
  flex: 1;
  overflow: hidden;
}

.new2 {
  flex: 1;
  overflow: hidden;
}

// .board {
//   width: 400px;
//   height: 35px;
//   margin-left: 10px;
//   position: relative;
// }

// .club {
//   width: 5px;
//   height: 25px;
//   position: absolute;
//   left: 5px;
//   top: 50%;
//   transform: translateY(-50%);
//   background-color: #226ebc;
// }

// .publicity {
//   position: absolute;
//   left: 30px;
//   top: 50%;
//   transform: translateY(-50%);
//   font-size: 16px;
// }

// .hotnews {
//   position: absolute;
//   left: 120px;
//   top: 50%;
//   transform: translateY(-50%);
//   font-size: 16px;
// }

// .policy {
//   position: absolute;
//   left: 210px;
//   top: 50%;
//   transform: translateY(-50%);
//   font-size: 16px;
// }

// .deltiles {
//   width: 90%;
//   height: 350px;
// }
.lis {
  width: 500px;
  height: 25px;
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.between {
  width: 500px;
  height: 360px;
  margin-left: 25px;
}

.between_lis {
  width: 400px;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.special {
  width: 100%;
  height: 350px;
  display: flex;
}

.theme {
  flex: 1;
  position: relative;
}

.appeal {
  flex: 1;
}

.imgs {
  width: 550px;
  height: 300px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.img1 {
  width: 260px;
  height: 140px;
  float: left;
  margin: 5px;
}

// .img2 {
//   width: 260px;
//   height: 140px;
//   float: right;
// }

// .img3 {
//   width: 260px;
//   height: 140px;
//   float: left;
//   margin-top: 20px;
// }

// .img4 {
//   width: 260px;
//   height: 140px;
//   float: right;
//   margin-top: 20px;
// }

img {
  width: 100%;
  // height: 100%;
}

.office {
  width: 50%;
  height: 300px;
  float: left;
  position: relative;
}

.office_area {
  position: absolute;
  width: 120px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.i_appeal {
  width: 50%;
  height: 300px;
  float: left;
  position: relative;
}

.i_appeal_btn {
  position: absolute;
  width: 120px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

